<template>
	<view>
		<view class="bg vw-100 vh-100">
			<image class="vh-100" :src="to.headimg" mode="heightFix"></image>
			<view class="cover"></view>
		</view>
		<cu-custom bgColor="bg-main" :isBack="true">
			<block class="text-white" slot="content">{{to.nc ? to.nc : to.dname}}</block>
		</cu-custom>
		<scroll-view scroll-y :style="{height: 'calc(100vh - '+CustomBar+'px)', paddingBottom: StatusBar+'px'}" 
			:scroll-top="scrollTop"
			refresher-enabled
			class="cu-chat">
			<view v-for="(msg, index) in msgs" :key="index">

				<view v-if="msg.fromid == mine.clientid" class="cu-item self">
					<view class="main">
						<view class="content shadow bg-main">
							<text>{{msg.msg}}</text>
						</view>
					</view>
					<view class="cu-avatar radius" :style="'background-image:url('+msg.fromcover+');'"></view>
					<view class="date">{{msg.ct}}</view>
				</view>

				<view v-if="msg.toid == mine.clientid" class="cu-item">
					<view class="cu-avatar radius" :style="'background-image:url('+msg.fromcover+');'"></view>
					<view class="main">
						<view class="content shadow">
							<text>{{msg.msg}}</text>
						</view>
					</view>
					<view class="date">{{msg.ct}}</view>
				</view>

			</view>

		</scroll-view>

		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">

			<input class="solid-bottom" 
				v-model="newmsg.msg"
				:adjust-position="false" :focus="false" 
				maxlength="50" cursor-spacing="10"
				@focus="InputFocus" @blur="InputBlur"></input>
			<button @tap="send" class="cu-btn bg-main text-white shadow">发送</button>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				mine: this.store.state.jl,
				pageInfo: {
					current: 1,
					size: 10,
				},
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				scrollTop: 0,
				to: {},
				msgs: [],
				InputBottom: 0,
				newmsg: {
					msgid: "",
					readflg: false,
					msg: "",
					fromid: "",
					toid: "",
					fromnc: "",
					tonc: "",
					fromcover: "",
					tocover: "",
				},
				refeshTask: undefined
			}
		},
		onLoad: function(option){
			this.to.id = option.id;
			this.loadTo().then(this.search).then(this.refreshMsg);
		},
		onUnload: function() {
			clearInterval(this.refeshTask);
		},
		methods: {
			refreshMsg: function() {
				this.refeshTask = setInterval(() => {
					this.api("/msg/chat/read").send({
						fromid: this.to.clientid,
						toid: this.mine.clientid,
					}).then(data => {
						if (data.msg) {
							this.msgs.push(data.msg);
							this.scrollTop += 100;
						}
					})
				}, 3000);
			},
			send: function() {
				if (this.to.dzid) {
					this.newmsg.fromid = this.mine.jlid;
					this.newmsg.toid = this.to.dzid;
					this.newmsg.fromnc = this.mine.jlname;
					this.newmsg.tonc = this.to.dname;
					this.newmsg.fromcover = this.mine.cover;
					this.newmsg.tocover = this.to.cover;
				} else {
					this.newmsg.fromid = this.mine.jlid;
					this.newmsg.toid = this.to.clientid;
					this.newmsg.fromnc = this.mine.jlname;
					this.newmsg.tonc = this.to.nc;
					this.newmsg.fromcover = this.mine.cover;
					this.newmsg.tocover = this.to.headimg;
				}
				
				
				this.api("/msg/chat/write")
					.send({
						msg: this.newmsg
					}).then(data => {
						this.newmsg.msgid = "";
						this.newmsg.msg = "";
						this.msgs.push(data.msg);
						
					});
			},
			search: function() {
				this.msgs = [];
				this.pageInfo.current = 1;
				return this.loadMsg();
			},
			loadMore: function() {
				this.pageInfo.current++;
				this.loadMsg();
			},
			loadTo: function() {
				if (this.to.id && this.to.id.startWith("CLI")) {
					return this.api("/client/info/get").send({
						clientid: this.to.id
					}).then(data => {
						this.to = data.client;
					});
				} else if (this.to.id && this.to.id.startWith("DZ")) {
					return this.api("/dz/get").send({
						dzid: this.to.id
					}).then(data => {
						this.to = data.adz;
					});
				}
			},
			loadMsg: function() {
				this.api("/msg/chat/list").send({
					fromid: this.to.dzid ? this.to.dzid : this.to.clientid,
					toid: this.mine.jlid,
					current: this.pageInfo.current,
					size: this.pageInfo.size
				}).then(data => {
					for (let index in data.msgs.records) {
						let rec = data.msgs.records[index];
						this.msgs.unshift(rec);
						this.scrollTop += 100;
					}
				})
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>

<style>
	.cover {
		background-color: rgba(255,255,255, 0.7);
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
	}
	
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: -1;
	}
</style>